<template>
  <div id="app">
      <lt-tree v-if="isReady"
               :props="props"
               show-checkbox
               node-key="name"
               @node-click="nodeClick"
               ref="tree"
               :load="loadNode" lazy>
      </lt-tree>
  </div>
</template>

<script>
export default {
    data() {
        return {
            //为了确保页面加载完成后才去调用load方法，this指向正确
            isReady: false,
            props: {
                label: 'name',
                children: 'zones',
                isLeaf: 'leaf'
            }
        };
    },
    mounted() {
        this.isReady = true;
    },
    methods: {
        loadNode(node, resolve) {
            if (node.level === 0) {
                setTimeout(() => {
                    resolve([{
                        name: 'region'
                    }]);
                }, 1000);
            }else{

                setTimeout(() => {
                    const data = [{
                        name: 'leaf',
                        leaf: true
                    }, {
                        name: 'zone'
                    }];

                    resolve(data);
                }, 500);
            }
        },
        nodeClick() {
            console.log(this.$refs.tree.getSimpleCheckedNodes())
        }
    }
}
</script>

<style lang="sass">

</style>
